import React, {FC, useEffect, useMemo, useState} from 'react'
import {Table} from 'antd'
import styles from './index.less'
import SearchForm from '@/components/SearchForm'
import {getDriverHistoryOrderlList} from '@/service/customer/driver'
import {TreeItem} from '../detail'
import {formatDate} from '@/utils/common/dateFilter'

interface HistoricalLeaseType {
	historyDataList: any[]
	setHistoryDataList: (list: any[]) => void
	driverId: string
	dict: any
	orgList: TreeItem[]
}

const historicalLease: FC<HistoricalLeaseType> = ({
	historyDataList,
	setHistoryDataList,
	driverId,
	dict,
	orgList,
}) => {
	const [loading, setLoading] = useState(false)

	const getColunms: any[] = useMemo(
		() => [
			{title: '订单号', dataIndex: 'orderNo', align: 'center'},
			{title: '订单状态', dataIndex: 'statusStr', align: 'center'},
			{title: '订单创建时间', dataIndex: 'createTime', align: 'center'},
			{title: '实际发车时间', dataIndex: 'driverTime', align: 'center'},
			{title: '销售类型', dataIndex: 'typeStr', align: 'center'},
			{title: '司机渠道来源', dataIndex: 'sourceStr', align: 'center'},
			{title: '所属公司', dataIndex: 'company', align: 'center'},
			{title: '车架号', dataIndex: 'vin', align: 'center'},
			{title: '车型', dataIndex: 'carType', align: 'center'},
			{title: '司机姓名', dataIndex: 'driverName', align: 'center'},
			{title: '合同号', dataIndex: 'contractNo', align: 'center'},
			{
				title: '合同审核状态',
				dataIndex: 'contractCheckStatusStr',
				align: 'center',
			},
			{
				title: '司机激活状态',
				dataIndex: 'driverStatusStr',
				align: 'center',
			},
			{title: '网签发起人', dataIndex: 'sponsor', align: 'center'},
			{title: '合同开始时间', dataIndex: 'startDate', align: 'center'},
			{title: '合同结束时间', dataIndex: 'endDate', align: 'center'},
			{title: '租期', dataIndex: 'deadline', align: 'center'},
			{title: '租金', dataIndex: 'money', align: 'center'},
			{title: '服务费', dataIndex: 'serverMoney', align: 'center'},
			{title: '押金', dataIndex: 'pledgeMoney', align: 'center'},
		],
		[],
	)

	const FormItems: any[] = useMemo(
		() => [
			{
				type: 'group',
				key: 'group1',
				groupItems: [
					{
						type: 'timeRange',
						key: 'createTime',
						name: 'createTime',
						label: '订单创建时间',
					},
					{
						type: 'input',
						key: 'orderNo',
						name: 'orderNo',
						label: '订单号',
					},
					{
						type: 'select',
						key: 'driverSource',
						name: 'driverSource',
						label: '司机渠道来源',
						items: dict.driver_channel_source.map((item: any) => ({
							label: item.dictValue,
							value: item.dictKey,
						})),
					},
				],
			},
			{
				type: 'group',
				key: 'group2',
				groupItems: [
					{
						type: 'treeSelect',
						label: '司机所属公司',
						name: 'company',
						key: 'affiliatedCompanyId',
						placeholder: '请选择',
						treeData: orgList,
						title: 'name',
						keys: 'id',
						defaultExpandAll: true,
					},
					{},
					{},
				],
			},
		],
		[dict, orgList],
	)

	const getList = async (params: Record<string, any>) => {
		const newData = {...params}
		if (params.createTime) {
			newData.createTimeStart = formatDate(
				params.createTime[0] as any,
				'yyyy-MM-DD HH:mm:ss',
			)
			newData.createTimeEnd = formatDate(
				params.createTime[1] as any,
				'yyyy-MM-DD HH:mm:ss',
			)
		}

		const obj: any = {...newData, driverId}
		delete obj?.createTime
		setLoading(true)
		const data = await getDriverHistoryOrderlList(obj).catch(() =>
			setLoading(false),
		)

		if (data.code === 0) {
			setHistoryDataList(data.data)
			setLoading(false)
		}
	}

	useEffect(() => {
		if (!driverId) return
		if (historyDataList.length === 0) {
			getList({})
		}
	}, [driverId])

	return (
		<div className={styles.historicalLease}>
			<div className={styles.titleBox}>历史租凭信息</div>
			<div className={styles.searchBox} style={{padding: '12px 0'}}>
				<SearchForm
					formLayout={{
						labelCol: {flex: '90px'},
						wrapperCol: {flex: '1'},
					}}
					formItems={FormItems}
					onReset={() => {
						getList({})
					}}
					onFinish={(value) => {
						getList(value)
					}}
				/>
			</div>
			<div>
				<Table
					rowKey="id"
					scroll={{x: 2300}}
					columns={getColunms}
					dataSource={historyDataList}
					loading={loading}
				/>
			</div>
		</div>
	)
}
export default historicalLease
